<template>
  <div class="home">
    <div class="white-bg " style="background: #fff;">
      <div class="main-content">
        <div class="main-total-box top-main-total">
          <div class="main-total-item top-total-list">
              <div class="left-total">
                <img class="user-icon" :src="userInfo.avatar" style="border: none"/>
                <div>
                  <div>
                    <span class="name-text">{{ userInfo.nickName }}</span>
                    <span class="color-999" style="font-size: 11px;">IP：{{ userInfo.loginIp }}</span>
                  </div>
                  <div class="color-999" style="font-size: 13px;margin-top: 3px;">单位：<span  v-if="userInfo.dept && userInfo.dept.deptName"
                    >{{ userInfo.dept.deptName }}</span><span v-if="getRolesName">-{{ getRolesName }}</span></div>
                </div>
              </div>
             
          </div>
        </div>
    </div>
    <div class="white-bg " style="padding: 19px;">
      <el-row :gutter="20" class="main-total-box main-total-list-box col-6-box">
          <el-col :lg="8" :md="12">
            <div class="main-total-item">
              <div class="flex-align-center">
                <img src="@/assets/index/icon-zdje.png" />
                <div>
                  <div class="color-999">今日注册用户</div>

                  <div class="main-num">
                    <count-to
                      :start-val="0"
                      :end-val="totalInfo.todayRegister || 0"
                    />
                  </div>
                </div>
              </div>
              <div class="flex-between-center">
                <div class="color-999 font-s-15">累计用户：</div>
                <div class="other-num">
                  <count-to
                    :start-val="0"
                    :end-val="totalInfo.totalRegister || 0"
                  />
                </div>
              </div>
            </div>
          </el-col>
          <el-col :lg="8" :md="12">
            <div class="main-total-item">
              <div class="flex-align-center">
                <img src="@/assets/index/icon-zbry.png" />
                <div>
                  <div class="color-999">今日消耗算力</div>

                  <div class="main-num">
                    <count-to
                      :start-val="0"
                      :end-val="totalInfo.todayConsume || 0"
                    />
                  </div>
                </div>
              </div>
              <div class="flex-between-center">
                <div class="color-999 font-s-15">累计消耗算力：</div>
                <div class="other-num">
                  <count-to
                    :start-val="0"
                    :end-val="totalInfo.totalConsume || 0"
                  />
                </div>
              </div>
            </div>
          </el-col>
          <el-col :lg="8" :md="12">
            <div class="main-total-item">
              <div class="flex-align-center">
                <img src="@/assets/index/icon-ywjl.png" />
                <div>
                  <div class="color-999">累计充值金额</div>

                  <div class="main-num">
                    <count-to
                      :start-val="0"
                      :end-val="totalInfo.totalRecharge || 0"
                    />
                  </div>
                </div>
              </div>
              <div class="flex-between-center">
                <div class="color-999 font-s-15">待消耗算力：</div>
                <div class="other-num">
                  <count-to
                    :start-val="0"
                    :end-val="totalInfo.toBeConsumePoint || 0"
                  />
                </div>
              </div>
            </div>
          </el-col>
      </el-row>
      
       
    </div>
    </div>
   
    <el-row :gutter="20">
      <el-col :lg="18" class="left-content-box">
       
        <div class="echarts-box">
          <el-tabs v-model="tabsCurrent">
            <el-tab-pane label="消耗算力" name="0">
            </el-tab-pane>
          </el-tabs>
          
          <div  class="echarts-view" ref="orderEcharts"></div>

         

        </div>
       
      </el-col>
      <el-col :lg="6" style="margin-top: 19px;">
        <div class="notice-box" style="height: 370px;">
          <div class="title-box">
            <span>内部公告</span>
            <div class="flex-align-center color-999 cur-poin" @click="lookNotice">
              <div>查看全部</div>
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
          <div class="notice-list">
            <div v-for="(item,index) in noticeList" :key="index" @click="onHandleNotice(item)">
              <img src="@/assets/index/icon-notice.png">
              <div class="flex-1" style="min-width: 0;">
                <div class="text-over font-s-18 fw-b">{{ item.noticeTitle }}</div>
                <div class="color-999">{{ item.createTime}}</div>
              </div>
            </div>
          </div>
        </div>
        
      </el-col>
    </el-row>
    <div class="white-bg " style="padding: 19px;margin-top: 19px;">
      <el-tabs v-model="tabsCurrent">
        <el-tab-pane label="消耗算力明细" name="0">
        </el-tab-pane>
      </el-tabs>
     
      <el-table v-loading="loading" :data="tableList" max-height="500">
        <!-- 算力类型id，算力名称，算力单价，今日消耗算力，累计消耗算力 -->
        <el-table-column label="算力类型id" width="130">
            <template slot-scope="scope">
                {{ scope.row.aiType ||'-' }}
            </template>
        </el-table-column>
        <el-table-column label="算力名称" >
            <template slot-scope="scope">
                {{selectDictLabel(dict.type.ai_type,scope.row.aiType ) ||'-'}}
            </template>
        </el-table-column>
       
        <el-table-column label="算力单价" >
            <template slot-scope="scope">
                {{scope.row.perPoint }}
            </template>
        </el-table-column>
        
        
        <el-table-column label="今日消耗算力" >
            <template slot-scope="scope">
                {{ scope.row.todayConsume}}
            </template>
        </el-table-column>
        <el-table-column label="累计消耗算力" >
            <template slot-scope="scope">
                {{ scope.row.totalConsume }}
            </template>
        </el-table-column>
        
      </el-table>
    <pagination
        v-show="total>0"
        :total="total"
        :autoScroll="false"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getOrderList"
        />
    </div>
    
    
    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="780px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" label-position="top">
        <el-row>
          <el-col :span="24">
            <el-form-item label="文章标题" prop="noticeTitle">
              {{ form.noticeTitle || '-' }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="文章类型" prop="noticeType">
              <dict-tag :options="dict.type.sys_notice_type" :value="form.noticeType"/>
              <!-- <el-select v-model="form.noticeType" placeholder="请选择类型">
                <el-option
                  v-for="dict in dict.type.sys_notice_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value.toString()"
                ></el-option>
              </el-select> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态">
              <dict-tag :options="dict.type.sys_notice_status" :value="form.status"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="文章内容" >
              <div class="flex-align-center" v-html="form.noticeContent"></div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
     
    </el-dialog>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import * as echarts from 'echarts'
import {listNotice,getNotice} from '@/api/system/notice'
import { mapGetters } from 'vuex'
import {getIndexTotal,reportAdmin,getIndexAiPointDetail} from '@/api/index'
import {listOrder} from '@/api/computeOrderManage/orderList'
export default {
  name: "Index",
  components: {CountTo},
  dicts:['sys_notice_type','sys_notice_status','order_status','order_type','point_change_type','recharge_status','recharge_type','ai_type'],
  computed: {
    ...mapGetters(['userInfo']),
    getRolesName() {
      const roles = this.userInfo.roles.map(item => (item.roleName))
      return roles.toString()
    },
  },
  data() {
    return {
      totalInfo: {},
      current: 1,
      current1: 1,
      noticeList:[],
      tabsCurrent : 0,
      totalList: [],
      open: false,
      title:'',
      form: {},
      rules: {},
      queryParams: {
        pageSize: 10,
        pageNum:1,
        pointChangeType:2,
        orderStatus:3,
        keyword:'',
        
      },
      loading:false,
      total: 0,
      tableList:[]
    };
  },
  mounted(){
    // this.orderEchart(['02-10','02-10','02-10','02-10','02-10','02-10','02-10'],[50,60,100,80,60,40,120],[40,30,80,100,50,60,80])
    // this.chinaEchart()
   
  },
  created() {
    this.getTotal()
    this.getNoticeList()
    this.getLineTotal()
    this.getOrderList()
  },
  methods: {
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
  },
  /** 重置按钮操作 */
  resetQuery() {
      this.dateRange = [];
      this.dateRangeTwo = []
      this.resetForm("queryForm");
      this.handleQuery();
  },
    getOrderList() {
      getIndexAiPointDetail({}).then(response=> {
        this.tableList = response.data
      })
    },
    onHandleNotice(row) {
      const noticeId = row.noticeId || this.ids
      getNotice(noticeId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "公告详情";
      });
    },
    getLineTotal() {
      reportAdmin().then(res=> {
        console.log(res,'res')
        this.totalList = res.data
        this.orderEchart()
      })
    },
    getNoticeList() {
      listNotice({pageSize: 3,pageNum:1}).then( res => {
        this.noticeList = res.rows
      })
    },

    getTotal() {
      getIndexTotal({}).then(res => {
        this.totalInfo = res.data
      })
    },

    orderEchart() {
      var myChart = echarts.init(this.$refs.orderEcharts,'macarons');
      let xAxisData = this.totalList.map(item=>item.day)
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              width: 1,
              color: "#00CCB1",
            },
          }
        },
        legend: {
            data: ["当日消耗算力", "当日充值算力"],
            itemGap: 40,
          },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine:{show: false},
          axisLabel:{
            color:'#999'
          },
          data: this.totalList.map(item => item.day)
        },
        yAxis: {
          type: 'value',
          axisTick: {
            //y轴刻度线
            show: false
          },
          axisLine: {
            //y轴
            show: false
          },
          splitLine:{
            show: true,
              lineStyle: {
              color:'#eee'
              }
          },
          axisLabel:{
            color:'#999'
          },
        },
        grid: {
          left: '0',
          right: '0',
          top: '40',
          bottom: '0', 
          containLabel: true
        },
        series: [
          {
            name: '当日消耗算力',
            data: this.totalList.map(item=> item.consumePoint),
            // symbol:"circle",
            showSymbol: false,
            type: 'line',
            smooth: true,
            label:{
              show:false
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1,//变化度
              //渐变色
              [{
                      offset: 0,
              color: 'rgba(255, 133, 51, 0.24)'
              }, {
                      offset: 1,
              color: 'rgba(255, 133, 51, 0)'
              }]),
            },
            itemStyle:{
              color:'#FF8533',
            },
            lineStyle:{
              color:"#FF8533",
              width: '1',
            }
          },
          {
              name: "当日充值算力",
              data: this.totalList.map(item=> item.rechargePoint),
              // symbol:"circle",
              showSymbol: false,
              type: "line",
              smooth: true,
              label: {
                show: false,
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1, //变化度
                  //渐变色
                  [
                    {
                      offset: 0,
                      color: "rgba(51, 173, 255, 0.24)",
                    },
                    {
                      offset: 1,
                      color: "rgba(51, 173, 255, 0)",
                    },
                  ]
                ),
              },
              itemStyle: {
                color: "#33ADFF",
              },
              lineStyle: {
                color: "#33ADFF",
                width: "1",
              },
            },
          
        ]
      };
			myChart.setOption(option);
    },
    productEchart(xAxisData,seriesData1,seriesData2) {
      var myChart = echarts.init(this.$refs.productEcharts,'macarons');
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              width: 1,
              color: "#00CCB1",
            },
          }
        },
        legend: {
          data: ['下游消费', '上游采购'],
          itemGap:40,
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine:{show: false},
          axisLabel:{
            color:'#999'
          },
          data: xAxisData
        },
        yAxis: {
          type: 'value',
          axisTick: {
            //y轴刻度线
            show: false
          },
          axisLine: {
            //y轴
            show: false
          },
          splitLine:{
            show: true,
              lineStyle: {
              color:'#eee'
              }
          },
          axisLabel:{
            color:'#999'
          },
        },
        grid: {
          left: '0',
          right: '0',
          top: '40',
          bottom: '0', 
          containLabel: true
        },
        series: [
          {
            name: '下游消费',
            data: seriesData1,
            // symbol:"circle",
            showSymbol: false,
            type: 'line',
            smooth: true,
            label:{
              show:false
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1,//变化度
              //渐变色
              [{
                      offset: 0,
              color: 'rgba(255, 133, 51, 0.24)'
              }, {
                      offset: 1,
              color: 'rgba(255, 133, 51, 0)'
              }]),
            },
            itemStyle:{
              color:'#FF8533',
            },
            lineStyle:{
              color:"#FF8533",
              width: '1',
            }
          },
          {
            name: '上游采购',
            data: seriesData2,
            // symbol:"circle",
            showSymbol: false,
            type: 'line',
            smooth: true,
            label:{
              show:false
            },
            areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1,//变化度
                  //渐变色
                  [{
                          offset: 0,
                  color: 'rgba(51, 173, 255, 0.24)'
                  }, {
                          offset: 1,
                  color: 'rgba(51, 173, 255, 0)'
                  }]),
                },
            itemStyle:{
              color:'#33ADFF'
            },
            lineStyle:{
              color:"#33ADFF",
              width: '1',
            }
          }
        ]
      };
			myChart.setOption(option);
    },
    lookNotice() {
      this.$router.push('/system/noticeList')
    }
    // chinaEchart(){
    //   echarts.registerMap('china', china) //这个特别重要
    //   let myChart = echarts.init(this.$refs.chinaMap, null, {renderer:'svg'});
    //   myChart.off('click');
    //   //echart 配制option  
    //   var options= {
    //     tooltip: {
    //       show:false,
    //       triggerOn: "mousemove",   //mousemove、click
    //       padding:8,
    //       borderWidth:1,
    //       borderColor:'#409eff',
    //       backgroundColor:'rgba(255,255,255,0.7)',
    //       textStyle:{
    //         color:'#000000',
    //         fontSize:13
    //       },
    //       formatter: function(e, t, n) {
    //         let data = e.data;
    //         let context = `
    //         <div>
    //             <p><b style="font-size:15px;">${data.name}</b>(2020年第一季度)</p>
    //             <p class="tooltip_style"><span class="tooltip_left">成果总数</span><span class="tooltip_right">${data.value}</span></p>
    //         </div>
    //         `
    //         return context;
    //       }
    //     },
    //     visualMap: {
    //       show:false,
    //       left: 26,
    //       bottom: 40,
    //       showLabel:true,
    //       pieces: [
    //         {
    //           gte: 1000,
    //           label: ">= 1000",
    //           color: "#5475f5"
    //         },
    //         {
    //             gte: 700,
    //             lt: 999,
    //             label: "700 - 999",
    //             color: "#e6ac53"
    //         },
    //         {
    //             gte: 500,
    //             lt: 699,
    //             label: "500 - 699",
    //             color: "#9feaa5"
    //         },
    //         {
    //             gte: 100,
    //             lt:499,
    //             label: "100 - 499",
    //             color: "#85daef"
    //         },
    //         {
    //             gte: 10,
    //             lt: 99,
    //             label: "10 - 99",
    //             color: "#74e2ca"
    //         },
    //         {
    //             lt:10,
    //             label:'<10',
    //             color: "#9fb5ea"
    //         }
    //       ]
    //     },
    //     geo: {
    //       map: "china",
    //       scaleLimit: {
    //         min: 1,
    //         max: 2
    //       },
    //       zoom: 1.1,
    //       layoutSize: "100%", //保持地图宽高比
    //       itemStyle:{
    //         borderColor: 'rgba(0, 0, 0, 0.15)',
    //         // shadowBlur: 50,
    //         // shadowColor: 'rgba(0, 0, 0, 0.2)',
    //         // areaColor: '#1955a4',
    //       },
    //       emphasis:{
    //         focus: 'none',
    //         label:{
    //           show:false
    //         }
    //       }
    //     },
    //     series: [
    //       {
    //         name: "用户地域分布",
    //         type: "map",
    //         geoIndex: 0,
    //         data: this.dataList
    //       }
    //     ]
    //   }
    //   myChart.clear();
    //   myChart.setOption(options);
    //   myChart.resize();
    // }
  },
};
</script>

<style scoped lang="scss">
.home{
  .tabs-box{
    display: flex;
    border-bottom: 2px solid #F5F5F5;
    >div{
      font-size: 16px;
      color: #999;
      margin-right: 24px;
      cursor: pointer;
      padding-bottom: 12px;
      &:last-child{
        margin-right: 0;
      }
      &.active{
        font-weight: bold;
        color: #33A0FF;
        position: relative;
        &:after{
          content: '';
          width: 100%;
          height: 2px;
          background: #33A0FF;
          position: absolute;
          bottom: -2px;
          left: 0;
        }
      }
    }
  }
  .title-box{
    border-bottom: 2px solid #F5F5F5;
    padding-bottom: 12px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    span{
      font-weight: bold;
      position: relative;
      font-size: 20px;
      &:after{
        content: '';
        width: 100%;
        height: 2px;
        background: #33A0FF;
        position: absolute;
        bottom: -14px;
        left: 0;
      }
    }
    .el-icon-arrow-right{
      margin-top: 2px;
    }
  }
  // .main-total-box{
  //   .main-total-item{
  //     height: 173px;
  //     background: linear-gradient( 180deg, #F5F9FF 0%, #FFFFFF 100%);
  //     border: 2px solid #FFFFFF;
  //     padding: 24px;
  //     justify-content: space-between;
  //     display: flex;
  //     flex-direction: column;
  //     font-size: 16px;
  //     margin-bottom: 20px;
  //     img{
  //       border: 1px dashed #eee;
  //       width: 68px;
  //       height: 68px;
  //       margin-right: 16px;
  //     }
  //     .main-num{
  //       font-size: 40px;
  //       font-weight: bold;
  //       margin-top: 10px;
  //     }
  //     .other-num{
  //       font-size: 24px;
  //       font-weight: bold;
  //     }
  //   }
  // }
  .left-content-box{
    >div{
      background: #FFFFFF;
      margin-top: 20px;
    }
    .convenient-service{
      margin-top: 0;
      padding: 24px 24px 14px 24px;
      .handle-desc{
        color: #999;
        position: relative;
        margin-left: 16px;
        padding-left: 16px;
        font-size: 16px;
        &:after{
          content: '';
          width: 1px;
          height: 20px;
          background: #F5F5F5;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }
      .handle-box{
        display: flex;
        margin-top: 14px;
        flex-wrap: wrap;
        margin-left: -10px;
        margin-right: -10px;
        >div{
          width: 20%;
          padding: 10px;
          >div{
            cursor: pointer;
            height: 76px;
            line-height: 76px;
            padding-left: 24px;
            color: #FFFFFF;
            font-size: 20px;
            font-weight: bold;
            letter-spacing: 1px;
            position: relative;
            z-index: 2;
            background: linear-gradient( 134deg, #0AADFF 0%, #70CFFF 100%);
            border-radius: 8px;
            &:after{
              content: '';
              background-image: url('~@/assets/index/ywbl-bg.png');
              background-size: 100% 100%;
              width: 76px;
              height: 76px;
              position: absolute;
              right: 0;
              top: 0;
              z-index: -1;
            }
          }
          &:nth-child(2)>div{
            background: linear-gradient( 134deg, #FF6C0A 0%, #FFA970 100%);
            &:after{
              background-image: url('~@/assets/index/cwjs-bg.png');
            }
          }
          &:nth-child(3)>div{
            background: linear-gradient( 134deg, #00CC7A 0%, #1BE091 100%);
            &:after{
              background-image: url('~@/assets/index/dhyy-bg.png');
            }
          }
          &:nth-child(4)>div{
            background: linear-gradient( 134deg, #FF4314 0%, #FF8D70 100%);
            &:after{
              background-image: url('~@/assets/index/yqdd-bg.png');
            }
          }
          &:last-child>div{
            background: linear-gradient( 134deg, #FF1424 0%, #FF707A 100%);
            &:after{
              background-image: url('~@/assets/index/csgl-bg.png');
            }
            margin-right: 0;
          }
        }
      }
    }
    .echarts-box{
      padding: 24px;
      .echarts-view{
        width: 100%;
        height: 250px;
        margin-top: 20px;
      }
    }
    .user-branch{
      padding: 24px;
      .china-map{
        width: 400px;
        height: 380px;
        margin-right: 24px;
      }
      .china-table{
        &.el-table{
          ::v-deep tr{
            background: #F0F4FA;
          }
          ::v-deep .el-table__header-wrapper th, ::v-deep .el-table__fixed-header-wrapper th{
            background-color: transparent;
            color: #4E5766;
            border-bottom: 0;
          }
        }
      }
    }
  }
  .notice-box{
    background-color: #FFFFFF;
    padding: 24px 24px 0;
    .title-box{
      margin-bottom: 0;
    }
    .notice-list{
      >div{
        display: flex;
        align-items: center;
        padding: 16px 0;
        border-bottom: 1px solid #F5F5F5;
        cursor: pointer;
        img{
          width: 60px;
          height: 60px;
          margin-right: 12px;
        }
        .text-over{
          max-width: 100%;
          margin-bottom: 10px;
        }
        &:hover{
          color: #33A0FF;
        }
      }
    }
  }
  .capital-box{
    background-color: #FFFFFF;
    padding: 24px;
    margin-top: 24px;
    .capital-table{
      margin-top: 16px;
      &.el-table{
        ::v-deep tr{
          background: linear-gradient( 135deg, #33BBFF 0%, #3392FF 100%);
        }
        ::v-deep .el-table__header-wrapper th, ::v-deep .el-table__fixed-header-wrapper th{
          background-color: transparent;
          color: #FFFFFF;
          border-bottom: 0;
        }
      }
    }
  }
  
}
@media only screen and (max-width: 1800px){
  .home .left-content-box .convenient-service .handle-box > div{
    width: 25%;
  }
}
@media only screen and (max-width: 1550px){
  .home .left-content-box .convenient-service .handle-box > div{
    width: 33.33%;
  }
}
@media only screen and (max-width: 1300px){
  .home .left-content-box .convenient-service .handle-box > div{
    width: 50%;
  }
}
.main-total-box {
    
   
    &.top-main-total{
      border-bottom: 1px solid #F5F5F5;
      display: flex;
      flex-direction: column;
     
      padding: 19px;
     
    }
    &.main-total-list-box{
      padding:19px ;
      
      .main-total-item{
        background: #F5F9FF;
        padding: 24px;
        >div:first-child{
          border-bottom: 1px solid #E1E9F5;
          padding-bottom: 24px;
        }
        >div:last-child{
          margin-top: 14px;
        }
      }
    }
    .main-total-item {
      // height: 173px;
      // background: linear-gradient(180deg, #f5f9ff 0%, #ffffff 100%);
      // border: 2px solid #ffffff;
      // padding: 24px;
      justify-content: space-between;
      display: flex;
      flex-direction: column;
      font-size: 16px;
      // margin-bottom: 20px;
      &.top-total-list{
        display: flex;
        align-items: center;
        flex-direction: row;
        height: 68px;
        .left-total{
          display: flex;
          align-items: center;
          .name-text{
            font-size: 19px;
            font-weight: 500;
            margin-right: 9px;
          }
        }
        .right-total{
          display: flex;
          align-items: center;
          .el-radio-group{
            display: flex;
            margin-right: 10px;
          }
          .el-button{
            margin-left: 10px;
          }
        }
      }
      img {
        border: 1px dashed #eee;
        width: 68px;
        height: 68px;
        margin-right: 16px;
      }
      .main-num {
        font-size: 40px;
        font-weight: bold;
        // margin-top: 10px;
      }
      .other-num {
        font-size: 24px;
        font-weight: bold;
      }
    }
  }
  .white-bg{
    background: #fff;
    // padding: 24px;
    .main-content{
      background: url('../assets/images/top-total-bg.png')no-repeat;
      background-size: 100% 123px;
    }
    
  }
  .overview-box {
    // padding: 24px;
    // margin-top: 24px;
    background: #fff;
    display: flex;
    gap:19px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
   // background: linear-gradient(180deg, #f5f9ff 0%, #ffffff 30%);
    // border: 2px solid #ffffff;
    .overview-total {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      width:23.6%;
      background: #f5f7fa;
      border-radius: 8px;
      > div {
        cursor: pointer;
        // width: calc(50% - 5px);
        height: 80px;
        // background: #f5f7fa;
        border-radius: 4px;
        padding: 0 12px;
        margin-bottom: 10px;
        img {
          width: 40px;
          height: 40px;
          margin-right: 12px;
        }
        .num-text {
          font-size: 24px;
          font-weight: bold;
          margin-top: 4px;
        }
        &:nth-last-child(-n + 2) {
          margin-bottom: 0;
        }
        // &:hover {
        //   box-shadow: 2px 2px 5px #ddd;
        //   .color-999 {
        //     color: #33a0ff;
        //     font-weight: bold;
        //   }
        // }
      }
    }
  }

</style>
